<template>
    <div>
        <NavBar>
            <template #title>
                <h4>{{title }}</h4>
            </template>
            <template #left>
                <Icon name="arrow-left" size="20px" color="#2d2d2d" @click="back()">
                </Icon>
            </template>
            <template #right>
                <Icon name="ellipsis" size="23px" color="#191919" @click="showAction=true">
                </Icon>
            </template>
        </NavBar>
    </div>
    <ActionSheet v-model:show="showAction" :actions="actions" @select="onSelect" cancel-text="取消" close-on-click-action>
    </ActionSheet>
    <Popup v-model:show="showPopup" closeable style="width: 80%;">
        <div style="padding: 10px;">
            <h3 class="h3-box">修改备注</h3>
            <Form>
                <Field v-model="nickname" label="修改昵称" label-class="label-title" type="text" maxlength="10" 
                    placeholder="请输入新昵称" show-word-limit :rules="[{ required: true, message: '备注昵称不能为空' }]" />
                <div style="margin: 16px;">
                    <Button round block type="primary" @click="sumbitReset" size="small">
                        确 认
                    </Button>
                </div>
            </Form>
        </div>
    </Popup>
</template>

<script setup>
import { NavBar, Icon, ActionSheet, Dialog, Field, Form, Button ,Popup} from 'vant';
import { ref } from 'vue';
import router from '@/router';
const showAction = ref(false);
const showPopup = ref(false);
const nickname = ref('');
const actions = [
    { name: '删除好友', color: '#ee0a24' },
    { name: '修改备注', color: 'black' }
];
const props = defineProps({
    title: {
        type: String,
        required: true
    },

})
const sumbitReset = () => {
    emits('resetNickname', nickname.value);
    showPopup.value = false;
}
const emits = defineEmits(['deleteFriend', 'resetNickname']);
const onSelect = (item) => {
    showAction.value = false;
    if (item.name == '删除好友') {
        Dialog.confirm({
            message: '确定要删除好友吗？',
            showCancelButton: true,
            cancelButtonText: '取消',
        }).then(() => {
            emits('deleteFriend');
        });
    }
    else if (item.name == '修改备注') {
        showPopup.value = true;
    }
}
const back = () => {
    history.back();
}
</script>
<style>
.back-icon {
    color: #2d2d2d;
}

.clo {
    color: #191919;
}

.h3-box {
    font-size: 15px;
    color: #000;
    margin-left: 2.5rem;
}
.label-title {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dbf5d2;
    color: #3ed607;
    font-weight: bold;
    font-size: 13px;
}
</style>